<template>
  <div class="goods-container app-container">
    <div class="filter-container">
      <el-select v-model="listQuery.filter_type" placeholder="商品类" clearable class="filter-item select-item"
        @clear="clearFilter" @change="selectFilter">
        <el-option v-for="item in filterType" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
<!--      <el-select v-model="listQuery.id_public_goods_type" placeholder="一级分类" clearable class="filter-item select-item"
        @change="selectTypeFather" @clear="clearTypeFather">
        <el-option v-for="item in typeFather" :key="item.id_public_goods_type" :label="item.type_name"
          :value="item.id_public_goods_type" />
      </el-select>
      <el-select v-model="listQuery.type_child" :disabled="childDisable" placeholder="二级分类" clearable
        class="filter-item select-item" @clear="handleFilter">
        <el-option v-for="item in typeChild" :key="item.id_public_goods_type" :label="item.type_name"
          :value="item.id_public_goods_type" />
      </el-select>-->
      <el-input v-model="listQuery.id_public_goods_info" placeholder="商品ID" clearable class="filter-item input-item"
        style="width: 200px;" @clear="handleFilter" @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.goods_name_like" placeholder="商品名称" clearable class="filter-item input-item"
        style="width: 200px;" @clear="handleFilter" @keyup.enter.native="handleFilter" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit">
        <router-link :to="'/goods/creatGoods/'+'create'">新增</router-link>
      </el-button>
    </div>

    <el-container>
      <el-aside width="200px">
        <el-menu
          :default-active="defaultActive"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          :default-openeds="defaultOpen"
          unique-opened
        >
          <!-- unique-opened:只保持一个子菜单的展开 router: 启用导航模式,以index作为path进行路由跳转
          -->
          <el-submenu v-for="menu in typeFather" :key="menu.id_public_goods_type" :index="menu.id_public_goods_type.toString()">
            <template slot="title">
              <span>{{ menu.type_name }}</span>
            </template>
            <el-menu-item v-for="item in typeChild" :key="item.id_public_goods_type" :index="item.id_public_goods_type.toString()" @click="getChildGoods(item.id_public_goods_type)">
              <span slot="title">{{ item.type_name }}</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <el-table
          :key="tableKey"
          v-loading="listLoading"
          :data="list"
          border
          fit
          highlight-current-row
          style="width: 100%;"
        >
          <el-table-column label="商品ID" align="center">
            <template slot-scope="{row}">
              <span>{{ row.id_public_goods_info }}</span>
            </template>
          </el-table-column>
          <el-table-column label="商品名称" align="center">
            <template slot-scope="{row}">
              <span>{{ row.goods_name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="一级/二级类" align="center">
            <template slot-scope="{row}">
              <span>{{ row.type_name }} / {{ row.child_name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="零售规格" align="center">
            <template slot-scope="{row}">
              <span>{{ row.sales_describe }}</span>
            </template>
          </el-table-column>
          <el-table-column label="位置操作" align="center">
            <template slot-scope="{row}">
              <div>
                <el-tooltip class="item" effect="dark" content="上移" placement="top">
                  <el-button size="mini" type="primary" icon="el-icon-arrow-up" circle @click="handleMove(row, 'up')" />
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="下移" placement="top">
                  <el-button size="mini" type="primary" icon="el-icon-arrow-down" circle @click="handleMove(row, 'down')" />
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="置顶" placement="top">
                  <el-button size="mini" type="primary" icon="el-icon-upload2" circle @click="handleMoveEnd(row, 'up')" />
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="置底" placement="top">
                  <el-button size="mini" type="primary" icon="el-icon-download" circle @click="handleMoveEnd(row, 'down')" />
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="业务操作" align="center">
            <template slot-scope="{row}">
              <el-button size="small" type="primary">
                <router-link :to="'/goods/goodsDetail/'+'update/'+row.id_public_goods_info">
                  编辑
                </router-link>
              </el-button>
              <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="total>0" :total="total" :page.sync="currentPage" :limit.sync="listQuery.limit"
                    @pagination="getPageList" />
      </el-main>
    </el-container>
  </div>
</template>

<script>
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { goodsList } from '@/api/goods'

export default {
  name: 'GoodsList',
  components: { Pagination },
  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      currentPage: 0,
      defaultWeight: 0,
      defaultOpen: [],
      defaultActive: '',
      listQuery: {
        filter_type: 1,
        id_public_goods_type: null,
        type_child: null,
        id_public_goods_info: null,
        goods_name_like: null,
        invoke_method: 'public_page_4m_load_goods_list',
        pre_db_para_begin_idx: 0,
        pre_db_para_length_4_list: 10,
        pre_db_para_order_by_para: ' data_weight desc ',
      },
      childDisable: true,
      typeFather: [],
      typeChild: [],
      filterType: [
        { value: 1, label: '常用商品服务' },
        { value: 5, label: '充值付费商品' },
        { value: 11, label: '样品类' }
      ]
    }
  },
  created() {
  },
  mounted() {
    if (this.$route.query.agent_id) {
      this.listQuery.buyer_id = this.$route.query.agent_id
    }
    this.getTypeFather(1)
  },
  methods: {
    /*
    * 获取页面数据
    * */
    getList() {
      this.listLoading = true
      goodsList(this.Qs.stringify(this.listQuery)).then(response => {
        this.list = response.page_content
        this.total = response.result_num

        if (this.list.length) {
          this.defaultWeight = this.list[0].data_weight + 10
        } else {
          this.defaultWeight = 1000
        }

        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 0.5 * 1000)
      })
    },

    /*
    * 获取一级分类数据
    * */
    getTypeFather(filter) {
      goodsList(this.Qs.stringify({
        invoke_method: 'public_page_4m_load_main_cls',
        is_online: 0,
        filter_type: filter,
        pre_cmd_para_show_admin_type: 'super_and_login',
        pre_db_para_begin_idx: 0,
        pre_db_para_length_4_list: 1000
      })).then(response => {
        this.typeFather = response.page_content
        // this.defaultOpen.push(this.typeFather[0].id_public_goods_type.toString())
        this.getTypeChild(this.typeFather[0].id_public_goods_type)
      })
    },
    selectTypeFather(val) {
      this.getTypeChild(val)
      this.childDisable = false
    },
    clearTypeFather() {
      this.childDisable = true
      this.listQuery.id_public_goods_type = null
      this.listQuery.type_child = null
      this.getList()
    },
    /*
    * 获取二级分类数据
    * */
    getTypeChild(id) {
      goodsList(this.Qs.stringify({
        invoke_method: 'public_page_4m_load_child_cls',
        is_online: 0,
        pre_db_para_begin_idx: 0,
        pre_db_para_length_4_list: 1000,
        type_father: id
      })).then(response => {
        this.typeChild = response.page_content
        this.listQuery.type_child = this.typeChild[0].id_public_goods_type.toString()
        // this.defaultActive = this.typeChild[0].id_public_goods_type.toString()
        this.getList()
      })
    },

    /*
    * 点击分页进行查询
    * */
    getPageList(val) {
      this.listQuery.pre_db_para_begin_idx = (val.page - 1) * this.listQuery.pre_db_para_length_4_list
      this.getList()
    },
    /*
    * 查询数据
    * */
    handleFilter() {
      this.listQuery.pre_db_para_begin_idx = 0
      this.getList()
    },
    clearFilter() {
      this.listQuery.pre_db_para_begin_idx = 0
      this.listQuery.filter_type = 1
      this.getList()
    },
    selectFilter(val) {
      if (val) {
        this.getList()
        this.getTypeFather(val)
      } else {
        this.getTypeFather(1)
      }
    },
    /*
    * 新增商品
    * */
    handleCreate() {
      this.$router.push({ name: 'GoodsDetail', query: { type: 'create', defaultWeight: this.defaultWeight.toString() }})
    },
    /*
    * 编辑商品
    * */
    handleUpdate(item) {
      this.$router.push({ name: 'GoodsDetail', query: { type: 'update', goods_id: item.id_public_goods_info }})
    },
    /*
    * 删除商品
    * */
    handleDelete(item) {
      this.$confirm('您确定要删除该商品吗?', '提示', {
        type: 'warning'
      }).then(() => {
        goodsList(this.Qs.stringify({
          invoke_method: 'public_page_4m_unsee_goods_info',
          pre_db_para_id_public_goods_info: item.id_public_goods_info
        })).then(response => {
          this.$notify({
            title: 'Success',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
          this.getList()
        })
      }).catch(() => {
        this.getList()
      })
    },

    /*
    * 位置操作
    * */
    handleMove(item, type) {
      goodsList(this.Qs.stringify({
        id_public_goods_info: item.id_public_goods_info,
        pre_cmd_para_move_direction_type: type,
        invoke_method: 'public_page_4m_move_goods'
      })).then(response => {
        this.$notify({
          title: 'Success',
          message: '操作成功',
          type: 'success',
          duration: 2000
        })
        this.getList()
      })
    },
    /*
    * 置顶置底
    * */
    handleMoveEnd(item, type) {
      goodsList(this.Qs.stringify({
        id_public_goods_info: item.id_public_goods_info,
        pre_cmd_para_move_direction_type: type,
        invoke_method: 'public_page_4m_move_goods_2_end'
      })).then(response => {
        this.$notify({
          title: 'Success',
          message: '操作成功',
          type: 'success',
          duration: 2000
        })
        this.getList()
      })
    },

    handleOpen(key, keyPath) {
      this.listQuery.type_child = key
      this.getTypeChild(key)
      this.getList()
    },
    getChildGoods(id) {
      this.listQuery.type_child = id
      this.getList()
    },

    getSortClass: function(key) {
      const sort = this.listQuery.sort
      return sort === `+${key}` ? 'ascending' : 'descending'
    }
  }
}
</script>

<style lang="scss" scoped>
.el-aside {
  padding: 0;
  max-height: 500px;
  overflow-x: hidden;
}

#app {
  .goods-container.app-container {
    .el-container {
      .el-aside {
        .el-submenu {
          ::v-deep {
            .el-submenu__title {
              padding-left: 30px !important;
            }
          }
          &.is-opened {
            ::v-deep {
              .el-submenu__title {
                background-color: #1890ff;
                color: #FFFFFF;
              }
            }
          }

        }
      }
    }
  }
}
</style>
